<script>
//图表双Y轴配置
import BaseConfig from '../BaseConfig';
import * as ConfigEnum from '../config/config-enum';
import * as utils from '../../../../utils/helps';

export default {
  name: 'DoubleYAxisConfig',
  mixins: [BaseConfig],
  data() {
    return {
      axisTypes: ConfigEnum.DOUBLE_YAXIS_TYPE, //轴类型
      axisDataTypes: ConfigEnum.AXIS_DATA_TYPE, //轴数据转换类型
      selectedMetrics: [], //轴选择的显示指标
      selectedAxis: 'left', //选择的轴
      currentAxisName: '', //当前轴名称
      currentAxisType: 'normal', //当前轴数据转换类型
    };
  },
  computed: {
    //轴索引
    axisIndex() {
      return this.selectedAxis == 'left' ? 0 : 1;
    },
  },
  created() {
    this.getAxisInfo();
  },
  methods: {
    //获取轴信息
    getAxisInfo() {
      this.selectedMetrics = this.chartOptions.settings.axisSite[this.selectedAxis] || [];
      let axisName = this.chartOptions.settings.yAxisName;
      this.currentAxisName = axisName[this.axisIndex];
      let axisType = this.chartOptions.settings.yAxisType;
      this.currentAxisType = axisType[this.axisIndex];
    },
    //更新轴显示指标
    updateAxisSite() {
      let axisSite = this.chartOptions.settings.axisSite;
      if (this.selectedMetrics.length == 0) {
        delete axisSite[this.selectedAxis];
      } else {
        axisSite[this.selectedAxis] = utils.deepCopy(this.selectedMetrics);
      }
      this.updateOptions();
    },
    //更新轴标题
    updateAxisTitle() {
      let axisName = this.chartOptions.settings.yAxisName;
      axisName[this.axisIndex] = this.currentAxisName;
      this.updateOptions();
    },
    //更新轴数值转换
    updateAxisDataType() {
      let axisType = this.chartOptions.settings.yAxisType;
      axisType[this.axisIndex] = this.currentAxisType;
      this.updateOptions();
    },
  },
};
</script>

<template>
  <div>
    <Row>
      <Col span="8">
      <span>选择轴线：</span>
      </Col>
      <Col span="16">
      <Select
        v-model="selectedAxis"
        @on-change="getAxisInfo">
        <Option
          v-for="item in axisTypes"
          :value="item.value"
          :key="item.value">{{ item.key }}</Option>
      </Select>
      </Col>
    </Row>
    <Row>
      <Col span="8">
      <span>显示指标：</span>
      </Col>
      <Col span="16">
      <Select
        v-model="selectedMetrics"
        multiple
        @on-change="updateAxisSite">
        <Option
          v-for="item in chartOptions.settings.metrics"
          :value="item"
          :key="item"
        >{{ item }}</Option>
      </Select>
      </Col>
    </Row>
    <Row>
      <Col span="8">
      <span>数值转换：</span>
      </Col>
      <Col span="16">
      <Select
        v-model="currentAxisType"
        @on-change="updateAxisDataType">
        <Option
          v-for="item in axisDataTypes"
          :value="item.value"
          :key="item.value"
        >{{ item.key }}</Option>
      </Select>
      </Col>
    </Row>
    <Row>
      <Col span="8">
      <span>轴标题：</span>
      </Col>
      <Col span="16">
      <Input
        v-model="currentAxisName"
        @on-change="updateAxisTitle"></Input>
        </Col>
      </Col>
    </Row>
  </div>
</template>

<style>
</style>
